<template>
    <el-header>
        <div class="clearfloat" style="width: 100%">
            <div class="logo lf" @click="$router.push('/dashboard')"></div>
            <!-- 头像 -->
            <el-dropdown class="rt">
                <div class="el-dropdown-link name">
                    <img src="@/assets/img/man.png" alt="" class="smallAvatar" />
                    <div class="logininfo" style="cursor: pointer">
                        <p>
                            <span>{{ gretting }} </span>
                        </p>
                        <p>
                            <span>{{ realName }}</span>
                        </p>
                    </div>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <i class="iconfont" @click="dialogVisible = true" style="height: 100%; display: inline-block"> 修改密码</i>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <i class="iconfont icontuichu" @click="logOut" style="height: 100%; display: inline-block"> 退出</i>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <div class="line rt" v-if="window.sessionStorage.getItem('admin') == '2'"></div>
            <div class="rt" v-if="window.sessionStorage.getItem('admin') == '2'">
                <el-popover placement="bottom" trigger="click">
                    <div id="qrcode" ref="qrcode">
                        <img :src="qrcodeIMG" alt="" style="width: 200px; height: 200px" />
                    </div>
                    <el-button @click="downloadE" type="primary" style="width: 100%; margin-top: 5px">下载二维码</el-button>
                    <i slot="reference" class="el-icon-link" style="cursor: pointer"></i>
                </el-popover>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="40%" title="修改密码">
            <el-form :model="form" ref="form" :rules="formRules" hide-required-asterisk>
                <el-form-item label="新密码:" prop="classAlias" :label-width="'24%'" :rules="formRules.blur">
                    <el-col :span="16">
                        <el-input class="w" type="text" maxlength="30" v-model="form.password" placeholder="请输入新密码"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="二次确认密码:" prop="classAlias" :label-width="'24%'" :rules="formRules.blur">
                    <el-col :span="16">
                        <el-input class="w" type="text" maxlength="30" v-model="form.retestPassword" placeholder="请输入二次确认密码"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" plain size="medium" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" size="medium" @click="submitForm">确定</el-button>
            </span>
        </el-dialog>
    </el-header>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { api } from '@/http/api';
import { formRules } from '@/common/util/validator';
import QRCode from 'qrcodejs2';
@Component({
    components: {},
})
export default class WorkHeaderBar extends Vue {
    public form = {
        password: '',
        retestPassword: '',
    };
    formRules = formRules;
    dialogVisible = false;
    gretting = '';
    qrcodeIMG = '';
    timer: any;
    public $refs: {
        qrcode: HTMLFormElement;
    };
    mounted() {
        this.getGretting();
        this.timer = setInterval(() => {
            this.getGretting();
        }, 1000);
        /**获取二维码 */
        if (sessionStorage.getItem('admin') == '1') return;
        api.Pharmacy_GetPharmacyById().then((res) => {
            console.log('药店id', res);
            // this.crateQrcode(JSON.stringify({ id: res.id, name: res.drugstoreName }));
            api.Partial_PostMoths({
                id: res.id,
                name: res.drugstoreName,
            }).then((res) => {
                console.log('店铺二维码', 'data:image/png;' + res);
                this.qrcodeIMG = 'data:image/png;base64,' + res;
            });
        });
    }
    get realName() {
        return sessionStorage.getItem('name');
    }
    crateQrcode(id) {
        new QRCode('qrcode', {
            width: 150,
            height: 150, // 高度
            text: id, // 二维码内容
        });
    }
    // 点击下载app二维码
    downloadE() {
        var canvasData = this.$refs.qrcode.getElementsByTagName('canvas');
        var a = document.createElement('a');
        var event = new MouseEvent('click'); // 创建一个单击事件
        a.href = this.qrcodeIMG;
        // a.href = canvasData[0].toDataURL('image/png');
        a.download = 'drcQrcode';
        a.dispatchEvent(event); // 触发a的单击事件
    }
    getGretting() {
        var hour = new Date().getHours();
        if (hour < 8) {
            this.gretting = '早上好';
        } else if (hour < 11) {
            this.gretting = '上午好';
        } else if (hour < 13) {
            this.gretting = '中午好';
        } else if (hour < 17) {
            this.gretting = '下午好';
        } else if (hour < 24) {
            this.gretting = '晚上好';
        } else {
            this.gretting = '夜里好';
        }
    }
    /**重置密码 */
    submitForm() {
        this.$confirm('确认修改密码吗?', '提示', {
            type: 'warning',
        })
            .then(() => {
                api.Pharmacy_UpdatePharmacyPassword(this.form).then(() => {
                    this.$message.success('修改密码成功');
                    this.dialogVisible = false;
                });
            })
            .catch(() => {});
    }

    //退出登录
    logOut() {
        this.$confirm('确认退出吗?', '提示', {
            type: 'warning',
        })
            .then(() => {
                location.reload();
                sessionStorage.clear();
                this.$router.push('/login');
            })
            .catch(() => {});
    }
    beforeDestory() {
        clearInterval(this.timer);
    }
}
</script>
<style lang="scss" scoped>
.headImg {
    width: 40px;
    height: 40px;
    vertical-align: middle;
}

.logo {
    cursor: pointer;
    line-height: 60px;
    font-size: 18px;
    // font-weight: bold;
    display: flex;
    .logoimg {
        width: 60px;
        height: 60px;
        padding: 8px 0;
        img {
            width: 100%;
            height: 100%;
        }
        margin-right: 15px;
    }
}

/deep/ .el-menu-item.is-active {
    color: #3563c5;
    background-color: #fff;
    margin: 5px 10px;
}
.el-menu-item:focus,
.el-menu-item:hover {
    color: #3563c5;
    background-color: #fff;
    margin: 5px 10px;
}
.avatars2 {
    width: 42px;
    height: 42px;
    margin-top: 10px;
    img {
        border: 1px solid #ddd;
        background: #fff;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        cursor: pointer;
    }
}

.name {
    height: 100%;
    display: flex;
    align-items: center;
    .smallAvatar {
        width: 40px;
        height: 40px;
        border: 2px solid #ddd;
        border-radius: 50%;
        margin-right: 10px;
        vertical-align: middle;
    }
    .logininfo {
        height: 100%;
        line-height: normal;
        padding-top: 5px;
        text-align: left;
        p {
            margin: 0;
        }
    }
    span {
        font-size: 14px;
        height: 31px;
        line-height: 31px;
        display: inline-block;
        vertical-align: top;
    }
    .admin {
        background: #3563c5;
        color: #fff;
        padding: 0 10px;
        border-radius: 10px;
        font-size: 10px;
        margin-left: 10px;
    }
}
.avatarDetail {
    font-size: 12px;
    p {
        .jump {
            text-decoration: underline;
            color: #3563c5;
            cursor: pointer;
        }
    }
}
.logoout {
    background: #f3f5fb;
    width: 100%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 14px;
    color: #3563c5;
    cursor: pointer;
}
.help .addbtn-1 {
    background: #61d20e;
    border-radius: 26px;
    border-radius: 26px;
    border-color: transparent;
    padding: 5px 12px !important;
    cursor: pointer;
}
.help span {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: #d8d8d8;
    /* margin-top: 7px; */
    position: absolute;
    bottom: 26px;
    right: -12px;
}

.quickstart span {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: #d8d8d8;
    /* margin-top: 7px; */
    position: absolute;
    bottom: 26px;
    right: 0;
}
.quickstart .addbtn-2 {
    background: #19abee;
    border-radius: 26px;
    border-radius: 26px;
    border-color: transparent;
    padding: 5px 12px !important;
    margin: 0 15px;
    cursor: pointer;
}
/deep/ .badge {
    .el-badge__content.is-fixed {
        top: 20px;
        right: 40px;
    }
}
.line {
    height: 20px;
    width: 1px;
    margin: 0 20px;
    background: #fff;
    margin-top: 25px;
}
#triangle {
    width: 0;
    height: 0;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    margin-left: 10px;
    line-height: 70px;
    margin-top: 24px;
}
</style>
